<div class="normal-wrapper flex-layout" *ngIf="!isEditMode">
  <span class="font-style">{{'GC.CURRENT_SCHEDULE' | translate}}</span>
  <span>{{(originScheduleType ? 'SCHEDULE.'+ originScheduleType.toUpperCase(): "") | translate}}</span>
  <span [hidden]="originScheduleType!==SCHEDULE_TYPE.WEEKLY">{{'SCHEDULE.ON' | translate}}</span>
  <span [hidden]="originScheduleType!==SCHEDULE_TYPE.WEEKLY">{{originWeekDay.text | translate}}</span>
  <span [hidden]="originScheduleType===SCHEDULE_TYPE.NONE">{{'SCHEDULE.AT' | translate}}</span>
  <span [hidden]="originScheduleType===SCHEDULE_TYPE.NONE">{{originOffTime.text}} AM</span>
  <button class="btn btn-outline btn-sm"  (click)="editSchedule()">{{'BUTTON.EDIT' | translate}}</button>
</div>
<div class="setting-wrapper flex-layout" *ngIf="isEditMode">
  <label for="gcPolicy"  class="font-style">{{'CONFIG.GC' | translate}}</label>
  <div class="select">
    <select id="gcPolicy" name="gcPolicy" [(ngModel)]="scheduleType">
      <option [value]="SCHEDULE_TYPE.NONE">{{'SCHEDULE.NONE' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.DAILY">{{'SCHEDULE.DAILY' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.WEEKLY">{{'SCHEDULE.WEEKLY' | translate}}</option>
    </select>
  </div>
  <section [hidden]="scheduleType!== SCHEDULE_TYPE.WEEKLY" class="select day-selector-wrapper">
    <span>{{'SCHEDULE.ON' | translate}}</span>
    <select id="daySelector" name="daySelector" [(ngModel)]="weekDay">
        <option *ngFor="let d of weekDays" [ngValue]="d">{{d.text | translate}}</option>
    </select>
  </section>
  <section [hidden]="scheduleType===SCHEDULE_TYPE.NONE">
    <span>{{'SCHEDULE.AT' | translate}}</span>
    <input type="time" name="dailyTimePicker" required [(ngModel)]="dailyTime" />
  </section>
  <button class="btn btn-primary btn-sm" (click)="scheduleGc()">{{'BUTTON.SAVE' | translate}}</button>
  <button class="btn btn-primary btn-sm" (click)="isEditMode = false" >{{'BUTTON.CANCEL' | translate}}</button>
</div>
<button class="btn btn-primary btn-sm gc-start-btn" (click)="gcNow()" [disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>
<div class="job-header font-style">{{'GC.JOB_HISTORY' | translate}}</div>
<clr-datagrid>
  <clr-dg-column>{{'GC.JOB_ID' | translate}}</clr-dg-column>
  <clr-dg-column>{{'GC.TRIGGER_TYPE' | translate}}</clr-dg-column>
  <clr-dg-column>{{'STATUS' | translate}}</clr-dg-column>
  <clr-dg-column>{{'START_TIME' | translate}}</clr-dg-column>
  <clr-dg-column>{{'UPDATE_TIME' | translate}}</clr-dg-column>
  <clr-dg-column>{{'LOGS' | translate}}</clr-dg-column>
  <clr-dg-row *ngFor="let job of jobs" [clrDgItem]='job'>
    <clr-dg-cell>{{job.id }}</clr-dg-cell>
    <clr-dg-cell>{{(job.type ? 'SCHEDULE.'+ job.type.toUpperCase() : '') | translate }}</clr-dg-cell>
    <clr-dg-cell>{{job.status.toUpperCase() | translate}}</clr-dg-cell>
    <clr-dg-cell>{{job.createTime | date:'medium'}}</clr-dg-cell>
    <clr-dg-cell>{{job.updateTime | date:'medium'}}</clr-dg-cell>
    <clr-dg-cell>
      <a *ngIf="job.status.toLowerCase() === 'finished' || job.status.toLowerCase() === 'error'" target="_blank" href="/api/system/gc/{{job.id}}/log"><clr-icon shape="list"></clr-icon></a>
    </clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer>{{'GC.LATEST_JOBS' | translate :{param: jobs.length} }}</clr-dg-footer>
</clr-datagrid>